<template>
    <div style="width: 95%;margin: 0 auto;">
<!--        <van-cell is-link @click="initData(this.shopId)" >您有优惠劵可领取</van-cell>-->
        <van-divider :style="{ color: '#fff', borderColor: '#fff', padding: '0 16px' }"/>
        <!-- 优惠券单元格 -->
        <van-coupon-cell
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                @click="showList = true"
                :show-close-button="false"

        />
        <!-- 优惠券列表 -->
        <van-popup
                v-model="showList"
                round
                position="bottom"
                style="height: 90%; padding-top: 4px;">
            <van-coupon-list
                    :coupons="coupons"
                    :chosen-coupon="chosenCoupon"
                    :disabled-coupons="disabledCoupons"
                    @change="onChange"
                    @exchange="onExchange"
            />
        </van-popup>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { CouponCell, CouponList } from 'vant';
    import bus from '../../assets/js/bus.js'
    Vue.use(CouponCell);
    Vue.use(CouponList);

    const coupon = []
    export default {
        name: "selectCoupon",
        props: ['carId','typeId'],
        data() {
            return {
                chosenCoupon: -1,
                coupons: [],
                disabledCoupons: [],
                showList:false,
                car:{}
            }
        },
        created() {
            this.initData();
        },
        methods: {
            initData(){
                this.showList = true;
                this.car.id = this.carId;
                this.car.type = this.typeId;
                console.log(this.car);
                this.$http.post('/coupon/web/couponHistory/getCouponByClientId',this.car).then(resp =>{
                        console.log(resp.data.data)
                        this.coupons = resp.data.data.coupons
                        this.disabledCoupons = resp.data.data.disabledCoupons
                    }
                )
            },
            onChange(index) {
                this.showList = false;
                this.chosenCoupon = index;
                // 通过eventbus 向(兄弟组件)中传入数据源 （值）
                bus.$emit('passitem', this.coupons[index])
                this.$store.commit('order/coupon',index)
            },
            onExchange(code) {
                // this.coupons.push(coupon);
                console.log(code)
            },
        }
    }
</script>

<style scoped>

</style>
